<template>
  <div>
    <div style="background: #e8f1f8">
      <div class="det_tab">
        <div class="det_tab_item">
          <eagle-cell-group :border="border">
            <eagle-input
              label="计划名称"
              :value="form.CheckPlanName"
              readonly
            ></eagle-input>
            <eagle-input
              label="检查类型"
              :value="
                form.CheckType == 'ZCLX0002'
                  ? form.CheckTypeName + '(' + form.ItemTypeName + ')'
                  : form.CheckTypeName
              "
              readonly
            ></eagle-input>

            <eagle-input 
              :value="form.CheckRequirement || '暂无检查要求'" 
              label="检查要求" 
              type="textarea" 
              rows="1" 
              autosize
              readonly
              ></eagle-input>

              <eagle-input 
              :value="form.EnterpriseNames || '暂无检查企业'" 
              label="检查企业" 
              type="textarea" 
              rows="1" 
              autosize
              readonly
              ></eagle-input>

          </eagle-cell-group>
          <eagle-cell-group :border="border" style="margin-top: 10px">
            <eagle-input
              label="计划发起人"
              :value="form.CreateChnName"
              readonly
            ></eagle-input>
            <eagle-input 
              label="检查人" 
              :value="form.CheckNames" 
              type="textarea" 
              rows="1" 
              autosize
              readonly
              ></eagle-input>
              <eagle-input 
              label="检查表" 
              :value="form.TNames" 
              type="textarea" 
              rows="1" 
              autosize
              readonly
              ></eagle-input>
          </eagle-cell-group>
          <eagle-cell-group :border="border" style="margin-top: 10px">
            <eagle-input
              label="开始时间"
              :value="form.StartDate"
              readonly
            ></eagle-input>
            <eagle-input
              label="结束时间"
              :value="form.EndDate"
              readonly
            ></eagle-input>
            <eagle-input
              label="计划重复"
              :value="form.CheckFrequencyName"
              readonly
            ></eagle-input>
            <eagle-input
              label="提前生成"
              :value="form.Advance + '天'"
              readonly
            ></eagle-input>
            <eagle-input
              label="包含周末"
              :value="form.IncludingWeekendName"
              readonly
            ></eagle-input>
          </eagle-cell-group>
          <div
            class="bottom-btns"
            v-if="form.AllowEnd && form.AllowTrack && form.AllowRevoke"
          >
            <eagle-button class="submit-btn" type="primary" @click="endPlan()">结束</eagle-button>
            <eagle-button class="submit-btn" type="info" @click="followPlan()">跟踪</eagle-button>
            <eagle-button class="submit-btn" type="info" @click="backPlan()">撤销</eagle-button>
          </div>
          <div
            class="bottom-btns"
            v-if="!form.AllowEnd && form.AllowTrack && !form.AllowRevoke"
          >
            <eagle-button class="submit-only" type="info" @click="followPlan()">跟踪</eagle-button>
          </div>

          <div
            class="bottom-btns"
            v-if="form.AllowEnd && form.AllowTrack && !form.AllowRevoke"
          >
            <eagle-button class="submit-btn" type="primary" @click="endPlan()">结束</eagle-button>
            <eagle-button class="submit-btn" type="info" @click="followPlan()">跟踪</eagle-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <eagle-dialog v-model="show" :showConfirmButton="false" @confirm="endBackConfirm('false')" @close="show=false">
      <div class="dialog-content-radio">
          <span>您确定要结束该检查计划吗?</span>
        </div>
    </eagle-dialog>
  </div>
</template>

<script>
import { getDate } from "@/utils/getDate";
// import { deepClone } from "@/utils";
export default {
  components: {},
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      id: this.$route.query.id,
      border: false,
      form: {},
      total: 0,
      show: false,
    };
  },
  created() {
    this.geDetail();
  },
  activated() {
    // if (this.$route.params.Operator) {
    // 	this.CorrectiveUserName = this.$route.params.Operator
    // 	this.CorrectiveChnName = this.$route.params.OperatorName
    // }
  },
  methods: {
    // 获取详情
    geDetail() {
      let _this = this;
      _this.$axios
        .get("/OtherDangerCheckPlan/GetDetail",{params:{ id: this.id }})
        .then((res)=>{
          _this.form = res.data;
          
          _this.form.StartDate = getDate(res.data.StartDate);
          _this.form.EndDate = getDate(res.data.EndDate);
        })
    },
    goExamPerson() {
      this.$router.push({
        path: "/Train/ExamPerson",
        query: { id: this.id },
      });
    },

    backPlan() {
      const that = this;
      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要撤回该检查计划吗？",
        })
        .then(() => {
          that.$axios
          .get("/OtherDangerCheckPlan/Revoke",{params:{ id: that.form.ID }})
          .then((res)=>{
              that.$router.goRefresh(-1);
            })
        })
        .catch(() => {
          // on cancel
        });
    },

    endPlan() {
      this.show = true;
    },

    endBackConfirm(params) {
      let _this = this;
      _this.$axios
      .get("/OtherDangerCheckPlan/End",{params:{ id: _this.form.ID, finishTask: params }})
      .then((res)=>{
        _this.$router.goRefresh(-1);
      })
    },
    followPlan() {
      this.$router.push("/OtherDanger/DangerCheckPlanFollow?CPCode=" + this.form.CPCode);
    },
  },
};
</script>

<style lang="less">
/*
        .main {
            height: 100vh;
        }
    */

.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_riskunit_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  /*background-color: #fff;*/

  .det_top {
    display: flex;
    justify-content: space-between;

    .dep_top_img {
      height: 20px;
      width: 20px;
      margin-right: 5px;
    }
  }

  .det_name {
    margin-top: 20px;
    text-align: center;
  }

  .det_location {
    text-align: center;
    margin-bottom: 20px;
  }
}

// .det_tab {
//   padding: 10px;
//   .det_tab_item {
//     padding: 10px 0;
//     background-color: #fff;
//     border-radius: 5px;
//     margin-bottom: 10px;

//     .det_tab_item_text {
//       padding: 0 10px;
//     }
//   }
// }
.text_box {
  padding: 10px;
  border-radius: 5px;
  /*background-color: #e8f1f8;*/
  margin-bottom: 10px;

  .text_top {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .top_link {
      color: #1989fa;
    }
  }

  .text_item {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;

    .item_link {
      color: #1989fa;
    }
  }

  .text_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      img {
        height: 25px;
        width: 25px;
        margin-bottom: 10px;
      }
    }
  }

  .text_history {
    display: flex;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .text_member {
    color: #1989fa;
    margin-bottom: 10px;
  }

  .text_total_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      .img_item_top {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  .text_record_list {
    .list_row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      > div {
        width: 33.3%;
      }
      .row_center {
        text-align: center;
      }
      .row_right {
        text-align: right;
      }
    }
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    font-size: 12px;
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
      /*margin-bottom: 10px;*/
    }
  }
}

// 弹框
.dialog-content {
  position: relative;
  padding: 40px 0;

  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 14px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-left: 20px;
    }
  }
  .dialog-content-radio {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 15px;
  }
}
</style>
